<template>
	<!-- 考核统计 -->
	<view class="flex-col h100">
		<view class="">
			<u-navbar title="考核统计" :placeholder="true" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#2172FC" :autoBack="true">
				<template #right>
					<u-icon name="hourglass" color="#fff" size="25" @click="openPopup"></u-icon>
				</template>
			</u-navbar>
		</view>
		<view class="p-10">
			<template v-if="list.length > 0">
				<view class="card" v-for="(item,index) in list" :index="index">
					<view class="flex m-between">
						<view class="name fw">
							<text>考核姓名:</text>{{item.examPeopleName}}
						</view>
						<view class="grade fw"> 考核单位:{{item.examJobName}}
						</view>
					</view>
					<view class="flex m-between m-t-8">
						<view class="post"> <text>考核岗位:</text> {{item.examDeptName}}
						</view>
						<view class="pro"> 考核日期: {{item.examTime }}
						</view>
					</view>
					<view class="flex m-between m-t-8">
						<view class="des m-t-8 fw" style="color: "> 排名: <u-tag :text="item.fineScore" size="mini" type="error"></u-tag>
						</view>
						<view class="date m-t-8"> 考核结果：{{item.mainReason}}
						</view>
					</view>
				</view>
			</template>
			<u-empty v-else mode="data">
			</u-empty>
		</view>
	</view>
	<!-- 筛选popup -->
	<u-popup :show="showPopup" class="my-popup" :closeOnClickOverlay="true" mode="right" @close="closePopup">
		<view class="p-20">
			<my-forms ref="dynamicForm" :model="queryParams" :formItem="formData">
				<template #examMonthStr>
					<view class="flex m-center s-center h100" @click="showDate = true"> {{queryParams.examMonthStr ? queryParams.examMonthStr : ''}} </view>
				</template>
			</my-forms>
			<view class="flex m-between">
				<button type="error" size="mini" @click="reset">重置</button>
				<button type="primary" size="mini" @click="submit">确定</button>
			</view>
		</view>
	</u-popup>
	<u-datetime-picker :show="showDate" @cancel="showDate = false" v-model="dateValue" @confirm="confirm" mode="year-month"></u-datetime-picker>
	<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
</template>
<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue";
	import {
		onShow,
	} from '@dcloudio/uni-app'
	import useList from '@/hooks/useList.js'
	import {
		resListExam,
		getSylz
	} from '@/api/exam.js'
	import date from '@/utils/date.js'
	let dynamicForm = ref(null),
		queryParams = reactive({
			pageNum: 1,
			pageSize: 10,
			examJob: '1',
			examMonthStr: date(new Date(), 'YYYY-MM'),
		}),
		showDate = ref(false),
		dateValue = ref(Date.now()),
		postList = ref([]),
		formData = computed(() => {
			return [{
				itemType: 'select',
				list: postList.value,
				label: '岗位',
				prop: 'examJob'
			}, {
				itemType: 'date',
				type: 'date',
				label: '考核月份',
				prop: 'examMonthStr'
			}]
		})
	const confirm = (item) => {
		queryParams.examMonthStr = date(new Date(item.value), 'YYYY-MM')
		showDate.value = false
	}
	const {
		getListData,
		list,
		scrollTop,
		showPopup,
		openPopup,
		closePopup,
		reset,
		submit
	} = useList({
		queryParams,
		api: {
			page: resListExam
		}
	})
	const getPostList = async () => {
		try {
			const {
				data
			} = await getSylz()
			postList.value = data.map(item => ({
				dictLabel: item.examJobName,
				dictValue: item.examJob
			}))
		} catch (e) {
			//TODO handle the exception
		}
	}
	onShow(() => {
		getPostList()
		getListData()
	})
</script>
<style lang="scss" scoped>
	.badge {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>